<template>
	<view class="page">

		<block>
			<view class="empty">

				<view class="welcome">
					{{tip}}
				</view> 


				<image src="https://jkht.wteam.club/file/LaiGou.png" mode="scaleToFill" class="People"
					v-if="domain =='https://shht.wteam.club/app'"></image>
				<image src="/static/Index/People.png" mode="scaleToFill" class="People"
					v-if="domain =='https://shht.wteam.club/api' 
				|| domain =='https://admin3.51sioc.com/api' || domain =='https://cw.tmmbuy.com/api' || domain =='https://userbg.czsgaf.com/api'"></image>


				<view class="BottomSao" v-if="ShowOpen==false" @click="SaoMaOpenDoor">
					<image src="/static/Index/ShaoYiShao.svg" mode="scaleToFill" class="SaoMaING"></image>
					<view class="SaoMa">
						扫码开门
					</view>
				</view>
				<view class="BottomSao" v-if="ShowOpen==true" @click="OpenDoor">
					<image src="/static/Index/Open.svg" mode="scaleToFill" class="SaoMaING"></image>
					<view class="SaoMa">
						一键开门
					</view>
				</view>
				<view class="OpenTheDoor" v-if="open!=''">
					<view class="box" @click="openTheDoor">
						<image src="../../static/Index/kefu.png" mode="scaleToFill"></image>
					</view>
				</view>

			</view>
		</block>
		<view class="ButtomBox">

			<view class="ButtomList">
				<!-- #ifdef MP-WEIXIN || H5 -->
				<view class="ButtomDiv">
					<image src="../../static/Index/BJ1.png" mode="scaleToFill" class="ButtomIcon"></image>
					<!-- 				<view class="ButtomTitle">
					第一步
				</view> -->
					<view class="ButtomDesc">
						1.使用微信扫门口二维码入店
					</view>
				</view>
				<!-- #endif -->
				
				 <!-- #ifdef MP-ALIPAY -->
				<view class="ButtomDiv">
					<image src="../../static/Index/BJ1.png" mode="scaleToFill" class="ButtomIcon"></image>
					<!-- 				<view class="ButtomTitle">
					第一步
				</view> -->
					<view class="ButtomDesc">
						1.使用支付宝扫门口二维码入店
					</view>
				</view>
				<!-- #endif -->
				<view class="ButtomDiv">
					<image src="../../static/Index/BJ2.png" mode="scaleToFill" class="ButtomIcon"></image>
					<!-- 				<view class="ButtomTitle">
					第二步
				</view> -->
					<view class="ButtomDesc">
						2.在收银机扫码口对准商品条码扫码
					</view>
				</view>

				<view class="ButtomDiv">
					<image src="../../static/Index/BJ3.png" mode="scaleToFill" class="ButtomIcon"></image>
					<!-- 				<view class="ButtomTitle">
					第三步
				</view> -->
					<view class="ButtomDesc">
						3.直接出示付款码付款
					</view>
				</view>
			</view>
		</view>
		<!-- 弹出层 -->
		<uni-popup ref="popup" type="bottom" class="page-red-envelope">
			<view class="box">
				<view class="opened">
					<view class="bgc">
						<image class="bgc-img" src="/static/Index/bg2.png" mode="aspectFit" />
					</view>
					<view class="main">
						<view class="text-area">
							<button @click="showModal"
								style="background: linear-gradient(90deg,#dcb793,#f3dac0);color: #906b51;border-radius: 24px;font-size: 32rpx;padding: 5rpx 80rpx;"
								shadow>免费领取会员</button>
						</view>
					</view>
					<view class="btn" @click="close">
						<image class="b-img" src="/static/Index/btn-icon.png" mode="aspectFit" />
					</view>

				</view>
			</view>
		</uni-popup>

		<!-- 优惠券弹窗 -->
		<liiy-coupon-popup ref="coupon_pop" :content="content" :CouponList="CouponList" :theme="theme" :title="title"
			@getClick="handleGetClick()"></liiy-coupon-popup>

		<!-- 		<view class="paper">
			<image src="/static/Index/Vip.png" mode="" class="img2"></image>
		</view> -->
		<view-tabbar tabIndex=0></view-tabbar>

		<!-- 		<view class="contents">
			<view class="nav nav_Active" @click="fault">
				<image src="../../static/Index/Index_A.svg" style="border-radius: 50%;"></image>
				<view>首页</view>
			</view>
			<view class="nav" @click="mine">
				<image src="../../static/Index/My.png" style="border-radius: 50%;"></image>
				<view>我的</view>
			</view>
		</view> -->
		<!-- 		<view class="contact-service" @click="serviceContact" v-if="needUserConfirm">
			<image class="contact-logo" src="../../static/icons/contact.png" />
			<view class="contact-text">客服</view>
		</view> -->
	</view>
</template>

<script>
	import index from "./index.js";
	export default index;
</script>

<style lang="scss" scoped>
	@import url("./index.css");

	.OpenTheDoor {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		top: -20vh;
		left: 35vw;

		.box {
			position: absolute;
			z-index: 99;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 90rpx;
			width: 90rpx;			
			font-size: 35rpx;
			border-radius: 50%;
			padding: 10rpx;
			background:linear-gradient(60deg, #66b0ff, #b9ffe8);		
			color: #fff;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}

	// .paper {
	// 	right: 10rpx;
	// 	bottom: 160rpx;
	// 	animation: scale 1s infinite;
	// 	position: fixed;
	// 	z-index: 999;

	// 	.img2 {
	// 		width: 130rpx;
	// 		height: 160rpx;
	// 	}
	// }

	.text-area {
		display: flex;
		justify-content: center;
	}

	.box {
		position: relative;
		transition: transform 0.7s;
		z-index: 88;
		top: 200rpx;

		.opened {
			position: relative;
			width: 100vw;
			height: 100vh;
			padding-top: 125rpx;
			box-sizing: border-box;

			.bgc {

				height: 855rpx;

				.bgc-img {
					width: 100%;
					height: 100%;
					position: relative;
					right: 26rpx;
				}
			}



			.main {
				position: relative;
				text-align: center;
				z-index: 6;
				bottom: 218rpx;

				:deep(.ayi-button) {
					height: 90rpx !important;
					background: linear-gradient(to right, #dbb393, #f7dec3);
					border-radius: 45rpx !important;
				}

				:deep(.ayi-button__text) {
					font-size: 28rpx;
					font-weight: 400;
					color: #78482f;
				}
			}
		}
	}

	.btn {
		text-align: center;
		position: relative;
		bottom: 50rpx;

		.b-img {
			width: 67rpx;
			height: 67rpx;
		}
	}
</style>